import React, { Component } from 'react';
import { connect } from 'react-redux';
import QueueAnim from 'rc-queue-anim';
import { List, InputItem, NavBar, Icon, Grid } from 'antd-mobile';

import { actionCreators } from '../../otherReducer/chat';
import { getChatId } from '../../util';

class Chat extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: '',
            msg: []
        };
        this.handleSend = this.handleSend.bind(this);
    }

    componentDidMount() {
        const { chatList } = this.props;
		const newList = chatList.toJS();
        if(!newList.length) {
            this.props.getChatMsgList();
            this.props.recvMsg();
        }    
    }

    componentWillUnmount () {
        const from = this.props.match.params.user;
        this.props.readMsg(from);
    }

    fixGrid() {
        setTimeout(function() {
            window.dispatchEvent(new Event('resize'))
        },0)
    }

    handleSend() {
        const from = this.props.user._id;
        const to = this.props.match.params.user;
        const msg = this.state.text;
        this.props.sendChatMsg({from, to, msg});
        this.setState({
            text: '',
            emojiShow: false
        })
    }

    render() {
        const emoji = '😀 😁 😂 😘 😍 😂 😘 😍 😙 😄 😎 😊 😛 😝 😱 😑 🙄 😕 🤗 🤓 🤡 👀 😀 😁 😂 😘 😍 😙 😄 😎 😊 😛 😝 😱 😑 🙄 😕 🤗 🤓  😂 😘 😍 😙 😄 😎 😊 😛 😝 😱 😑 🙄 😕 🤗 🤓 🤡 👀 😀 😁 😂 😘 😍 😙 😄 😎 😊 😛 😝 😱 😑 🙄 😕 🤗 🤓  😂 😘 😍 😙 😄 😎 😊 😛 😝 😱 😑 🙄 😕 🤗 🤓 🤡 👀 😀 😁 😂 😘 😍 😙 😄 😎 😊 😛 😝 😱 😑 🙄 😕 🤗 🤓  😙 😄 😎 😊 😛 😝 😱 😑 🙄 😕 🤗 🤓 🤡 👀 😀 😁 😂 😘 😍 😙 😄 😎 😊 😛 😝 😱 😑 🙄 😕 🤗 🤓 🤡 👀'
        const emojiList = emoji.split(' ').filter(v => v).map(v => ({text: v}));       
        const userid = this.props.match.params.user;
        const users = this.props.users.toJS();
        if (!users[userid]) {
            return  null;
        }
        const chatid = getChatId(userid, this.props.user._id);
        const chatMsg = this.props.chatList.toJS().filter(c => c.chatid === chatid);
        return (
            <div id="chat-page">
                <NavBar 
                    className='fixd-header' 
                    mode='dard'
                    icon={<Icon type="left" />}
                    onLeftClick={() => {
                        this.props.history.goBack();
                    }}>
                    {users[userid].name}
                </NavBar>
                <div style={{paddingTop: '45px', paddingBottom: '45px'}}>
                    <QueueAnim delay={100}>
                        {
                            chatMsg.map((v) => {
                                const avatar = require(`../../statics/avatar/${users[v.from].avatar}.png`);
                                return v.from === userid ? (
                                    <List key={v._id}>
                                        <List.Item thumb={avatar}>
                                            {v.content}
                                        </List.Item>
                                    </List>
                                ) : (
                                    <List key={v._id}>
                                        <List.Item 
                                            extra={<img src={avatar} alt="" />}
                                            className="chat-me">
                                            {v.content}
                                        </List.Item>
                                    </List>
                                )
                            })
                        }
                    </QueueAnim>
                </div>
                <div className="stick-footer">
                    <List>
                        <InputItem
                            placeholder="请输入"
                            value={this.state.text}
                            onChange={(val) => {
                                this.setState({
                                    text: val
                                })
                            }}
                            extra={
                                <div>
                                    <span 
                                        style={{marginRight: 15}}
                                        onClick={() => {
                                            this.setState({
                                                emojiShow: !this.state.emojiShow
                                            })
                                            this.fixGrid();
                                        }}
                                    >😘</span>
                                    <span onClick={this.handleSend}>发送</span>
                                </div>
                            }
                        >
                        </InputItem>
                    </List>
                    {
                        this.state.emojiShow ? (
                            <Grid
                                data={emojiList}
                                columnNum={9}
                                isCarousel={true}
                                carouselMaxRow={4}
                                onClick={(el) => {
                                    this.setState({
                                        text: this.state.text + el.text
                                    })
                                }}
                            />
                        ) : null
                    }
                </div>
            </div>
        )
    }

}

const mapStateToProps = (state) => ({
    user: state.getIn(['user', 'user']),
    chatList: state.getIn(['chat', 'chatList']),
    users: state.getIn(['chat', 'users'])
})

const mapDispatchToProps = (dispatch) => ({
    getChatMsgList() {
        dispatch(actionCreators.getMsgList());
    },
    sendChatMsg({from, to, msg}) {
        dispatch(actionCreators.sendMsg({from, to, msg}));
    },
    recvMsg() {
        dispatch(actionCreators.recvMsg());
    },
    readMsg(from) {
        dispatch(actionCreators.readMsg(from));
    }
})

export default connect(mapStateToProps, mapDispatchToProps)(Chat);